<ion-header>
    <ion-toolbar color="light">
        <ion-buttons start >
            <button ion-button icon-only navPop>
                <ion-icon name="arrow-back" ></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>{{ 'login.Register' | translate }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="re_content" >
    <div class="masking"></div>
    <div class="upload-box" (click)="imgSelect()">
        <span [ngStyle]="header"></span>
        <a >{{ 'login.Register' | translate }}</a>
    </div>
    <div class="padding-content">
        <div class="type-radio-group">
            <label class="input-radio" for="type_one">
                <input id="type_one" type="radio" [value]="1" [(ngModel)]="info.level">
                <span><b></b></span>
                <font>{{ 'login.tl' | translate }}</font>
            </label>
            <label class="input-radio" for="type_two">
                <input id="type_two" type="radio" [value]="2" [(ngModel)]="info.level">
                <span><b></b></span>
                <font>{{ 'login.Agent' | translate }}</font>
            </label>
            <label class="input-radio" for="type_three">
                <input id="type_three" type="radio" [value]="3" [(ngModel)]="info.level">
                <span><b></b></span>
                <font>{{ 'login.sp' | translate }}</font>
            </label>
        </div>
        <div class="hc-ion-item">
            <ion-input :placeholder="{{ 'input.full' | translate }}" [(ngModel)]="info.firstname"></ion-input>
        </div>
        <div class="hc-ion-item">
            <ion-input :placeholder="{{ 'input.display' | translate }}" [(ngModel)]="info.lastname"></ion-input>
        </div>
        <div class="hc-ion-item">
            <ion-input placeholder="" [(ngModel)]="info.email"></ion-input>
            <span class="place" *ngIf="info.email==''">{{ 'login.Email' | translate }}<i>*</i></span>
        </div>
        <div class="hc-ion-item">
            <ion-input placeholder="" type="{{typepwd}}" [(ngModel)]="info.password"></ion-input>
            <span class="place" *ngIf="info.password==''">{{ 'login.pnum' | translate }}<i>*</i></span>
            <i class="iconfont icon-login_open" id="signs" (click)="toggle()"></i>
        </div>
        <div class="hc-ion-item verify">
            <ion-input :placeholder="{{ 'input.vcode' | translate }}" [(ngModel)]="info.captcha"></ion-input>
            <button ion-button outline (click)="goCode()">{{ 'login.getcode' | translate }}</button>
        </div>
        <div class="hc-ion-item">
            <ion-input :placeholder="{{ 'input.Phone' | translate }}" [(ngModel)]="info.mobile"></ion-input>
        </div>
        <div class="hc-ion-item">
            <ion-label color="main" stacked>{{ 'more.Address' | translate }}</ion-label>
            <textarea placeholder="Belsize Road, London NW6" [(ngModel)]="info.address"></textarea>
        </div>
        <ion-item-divider color="light" class="hc-ion-select">
            <ion-label>{{ 'login.Nationality' | translate }}
            </ion-label>
            <ion-select [(ngModel)]="info.country"  okText="Okay" cancelText="Dismiss">
                <ion-option value="China">China</ion-option>
                <ion-option value="England">England</ion-option>
                <ion-option value="Spain">Spain</ion-option>
            </ion-select>
        </ion-item-divider>
        <ion-item-divider color="light" class="hc-ion-select">
            <ion-label>{{ 'login.Status' | translate }}
            </ion-label>
            <ion-select [(ngModel)]="info.status"  okText="Okay" cancelText="Dismiss">
                <ion-option value="0">Others</ion-option>
                <ion-option value="2">Professional</ion-option>
                <ion-option value="1">Student</ion-option>
            </ion-select>
        </ion-item-divider>
        <ion-item-divider color="light" class="hc-ion-select type-radio-group" style="border-bottom:0;">
            <label class="input-radio" for="asd_one" style="margin-right:20px;">
                <input id="asd_one" type="radio" [value]="1" [(ngModel)]="info.gender">
                <span style="vertical-align: bottom;"><b></b></span>
                <font>{{ 'input.Male' | translate }}</font>
            </label>
            <label class="input-radio" for="asd_two">
                <input id="asd_two" type="radio" [value]="2" [(ngModel)]="info.gender">
                <span style="vertical-align: bottom;"><b></b></span>
                <font>{{ 'input.Female' | translate }}</font>
            </label>
        </ion-item-divider>
        <div class="protocol">
            <ion-checkbox [(ngModel)]="protocol" ></ion-checkbox>
            <span>{{ 'login.text1' | translate }} <font style="color:#3A80F3"  [navPush]="aboutusPage" [navParams]="{type:2}">{{ 'login.text2' | translate }}</font> {{ 'login.text3' | translate }} <font style="color:#3A80F3"  [navPush]="aboutusPage" [navParams]="{type:3}">{{ 'login.text4' | translate }}</font>{{ 'login.text5' | translate }}</span>
        </div>
        <div class="hc-ion-confirmd" >
            <button ion-button (click)="goRegister()" >{{ 'login.Send' | translate }}</button>
        </div>
        <div class="tologin" navPop>{{ 'login.already' | translate }}</div>
        <div class="cutOff"><i></i><span>{{ 'login.with' | translate }}</span></div>
        <div class="login">
            <span style="background-image: url(./assets/imgs/login_google.svg);"></span>
            <span style="background-image: url(./assets/imgs/login_facebook.svg);"></span>
            <span style="background-image: url(./assets/imgs/login_instagram.svg);"></span>
            <span style="background-image: url(./assets/imgs/login_twitter.svg);"></span>
            <span style="background-image: url(./assets/imgs/login_wechat.svg);"></span>
        </div>
    </div>
    

</ion-content>